
//Vue.component('newsColumnLeftCom',newsColumnLeftCom);
var goodsColumnCom = Vue.extend({
    data() {
        return {
            houseList: [],
            typesList: [],
            types:null,
            goodsTypesList: [],
        };
    },
    watch:{
        $route(to){
            console.log(to);
/*
            var reg=/goods\/\d+/;
            if(reg.test(to.path)){
                var articleId=this.$route.params.type || 0;
                this.fetchData(articleId);
            }
            */
            this.fetchData(this.$route.params.types)
        }
    },
    mounted: function() {
        this.$nextTick(function() {
            this.fetchHouseData();
            //this.layoutView();
            this.typeList();
            this.fetchData(this.$route.params.types);
        });
    },
    methods: {
        fetchHouseData(){
            //var _this=this;
            this.houseList = JSON.parse(localStorage.getItem('house'));
        },
        typeList(){
            var menuData = JSON.parse(localStorage.getItem('menuData'));
            var typeData = new Array;
            for (var i = 0; i < menuData.length; i++) {
                if (menuData[i].url == '/Goods') {
                    for (var y = 0; y < menuData[i].children.length; y++) {
                        typeData.push(menuData[i].children[y]);
                    }
                }
            }
            //typeData.splice(1,1)
            this.typesList = typeData;
            //console.log(this.typesList);
        },
        fetchData(types){
            this.types = types;
            //var _this=this;
            this.goodsTypesList=[];
            var house = JSON.parse(localStorage.getItem('house'));
            //var goods = this.goodsList;
            if (this.$route.path == "/Goods" ) {
                //console.log('types',this.types);
                for (var i = 0; i < house.length; i++) {
                    house[i].show = true;
                    this.goodsTypesList.push(house[i]);
                }
            } else {
                //console.log('types',this.types);
                for (var i = 0; i < house.length; i++) {
                    if (house[i].types == this.types) {
                        house[i].show = true;
                        this.goodsTypesList.push(house[i]);
                    } else {
                        house[i].show = false;
                        this.goodsTypesList.push(house[i]);
                    }
                };
            }
            this.layoutView();
        },
        layoutView:function () {
            /*****************************************************
             * Properties Layout Function
             *****************************************************/
            var propertyItem =$(".layout-item-wrap"),
                layoutLinks= $('.layout-view .fa'),
                listStyle= $('.layout-item');
            layoutLinks.on('click', function () {
                var targetClass = 'col-xs-' + $(this).data('layout');
                propertyItem.removeClass(function (index, className) {
                    return (className.match (/\bcol-\S+/g) || []).join(' ');
                });
                propertyItem.addClass(targetClass);

                if (propertyItem.hasClass('col-xs-12')) {
                    listStyle.addClass('list-style');
                } else {
                    listStyle.removeClass('list-style');
                }
                layoutLinks.removeClass('selected');
                $(this).addClass('selected');
                return false;
            });
        },

    },
    props: [''],
    components:{
        siteBannerCom,
    },
    template: '\
<div>\
    <site-banner-com></site-banner-com>\
    <section id="property-listing">\
        <header class="section-header text-center">\
            <div class="container">\
                <div class="controls text-center pull-left" data-wow-duration="1s">\
                    <span class="control active" data-filter="all">All Types</span>\
                    <span class="control" v-bind:data-filter="\'.a\'+index" v-for="(item,index) in typesList"> <router-link :to="item.url" class="more">{{item.name}}</router-link></span>\
                </div>\
                <div class="pull-right">\
                    <p class="pull-left layout-view"> View as: <i class="fa fa-th selected" data-layout="4"></i> <i class="fa fa-th-large" data-layout="6"></i></p>\
                </div>\
            </div>\
        </header>\
        <header class="section-header text-center">\
            <div class="container">\
                <h2 class="pull-left">Showing 1-50 of 696 items</h2>\
                <div class="pull-right">\
                    <div class="property-sorting pull-left">\
                        <label for="property-sort-dropdown">Sort by:</label>\
                        <select name="property-sort-dropdown" id="property-sort-dropdown">\
                            <option value="">Default Order</option>\
                            <option value="by_date">By date</option>\
                            <option value="by_price">By price</option></select>\
                    </div>\
                    <p class="pull-left layout-view">View as:\
                        <i class="fa fa-th selected" data-layout="4"></i>\
                        <i class="fa fa-th-large" data-layout="6"></i>\
                        <i class="fa fa-list-ul" data-layout="12"></i>\
                    </p>\
                </div>\
            </div>\
        </header>\
        <div class="container section-layout">\
            <div class="row">\
                <div class="col-lg-4 col-sm-6 layout-item-wrap" v-for="(item,index) in goodsTypesList" v-show="item.show">\
                    <article class="property layout-item clearfix">\
                        <figure class="feature-image">\
                            <a class="clearfix zoom" href="single-property.html"><img data-action="zoom" v-bind:src="item.imgUrl" alt="Property Image"></a>\
                            <span class="btn btn-warning btn-sale" v-show="item.forSale">for sale</span></figure>\
                        <div class="property-contents clearfix">\
                            <header class="property-header clearfix">\
                                <div class="pull-left">\
                                    <h6 class="entry-title"><router-link :to="\'/goodsDetail/\' + index" >{{item.title}}</router-link></h6>\
                                    <span class="property-location"><i class="fa fa-map-marker"></i>14 Tottenham Road,London</span>\
                                </div>\
                                <button class="btn btn-primary btn-price pull-right btn-3d" v-bind:data-hover="item.price"><strong>{{item.price | currency}}</strong></button>\
                            </header>\
                            <div class="property-meta clearfix">\
                                <span><i class="fa fa-arrows-alt"></i>{{item.size}} SqFt</span>\
                                <span><i class="fa fa-bed"></i>{{item.bed}} Beds</span>\
                                <span><i class="fa fa-bathtub"></i>{{item.toilet}} Baths</span>\
                                <span><i class="fa fa-cab"></i>Yes</span>\
                            </div>\
                            <div class="contents clearfix">\
                                <p>Lorem ipsum dolor sit amet,consetetur sadipscing elitr,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,sed diam voluptua.At vero eos et accusam et justo duo dolores et ea rebum.Stet clita kasd gubergren,no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>\
                            </div>\
                            <div class="author-box clearfix">\
                                <a href="#" class="author-img"><img src="assets/images/agents/1.jpg" alt="Agent Image"></a>\
                                <cite class="author-name">Personal Seller:<a href="#">Linda Garret</a></cite>\
                                <span class="phone"><i class="fa fa-phone"></i>00894 692-49-22</span>\
                            </div>\
                        </div>\
                    </article>\
                </div>\
            </div>\
            <ul id="pagination" class="text-center clearfix">\
                <li class="disabled"><a href="#">Previous</a></li>\
                <li><a href="#">1</a></li>\
                <li><a href="#">3</a></li>\
                <li><a href="#">4</a></li>\
                <li><a href="#">Next</a></li>\
            </ul>\
        </div>\
    </section>\
</div>\
',

});
